<template>
  <el-card shadow="never" class="converseComponent">
    <div class="content">
      <div class="title">转化 </div>
      <div class="data">
        <div class="item" v-for="item in state" :key="item.name">
          <div class="myname">
            {{ item.name }}
            <el-tooltip v-if="item.desc" :content="item.desc" effect="light" placement="top">
              <el-icon style="margin-left: 4px; color: #fff; background: #969696; border-radius: 50%">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
          </div>
          <div class="num"> {{ item.a }}%</div>
          <div v-if="item.b > 0" class="desc red">
            <span class="desc_name">环比：</span> {{ item.b }}% <el-icon><Top /></el-icon>
          </div>
          <div v-if="item.b == 0" class="desc"> <span class="desc_name">环比：</span> {{ item.b }}% </div>
          <div v-if="item.b < 0" class="desc green">
            <span class="desc_name">环比：</span> {{ Math.abs(item.b) }}% <el-icon><Bottom /></el-icon>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup lang="tsx">
  import { ref, defineExpose } from 'vue'
  const state = ref<any>([])
  const onConverse = (res: any) => {
    console.log('转化率', res)

    state.value = [
      { name: '访问加购转化率', desc: '选定条件下，加购商品的人数/访客量', a: res.visitors_purchased_converse, b: res.sequen_visitors_purchased_converse },
      { name: '访问支付转化率', desc: '选定条件下，从访问店铺到支付订单的转换率（访客中的支付人数/访客量）目前自营店铺、客易达店铺支持访问支付转化率的统计。', a: res.visitors_pay_converse, b: res.sequen_visitors_pay_converse },
      { name: '下单支付转化率', desc: '选定条件下，支付人数/下单人数', a: res.order_pay_converse, b: res.sequen_order_pay_converse },
      { name: '客户复购率', desc: '选定条件下，复购人数/支付人数', a: res.repeat_pay_rate, b: res.sequen_repeat_pay_rate }
    ]
  }
  defineExpose({
    onConverse
  })
</script>
<style scoped lang="scss">
.converseComponent {
  margin-bottom: 16px;
}
  .content {
    .title {
      display: flex;
      padding-bottom: 14px;
      // margin-bottom: 26px;
      border-bottom: 1px solid #eaeaea;
      font-size: 16px;
    }
  }
  .data {
    display: flex;
    justify-content: space-around;
    margin-top: 16px;
    .item {
      .myname {
        display: flex;
        padding-bottom: 16px;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #696969;
        line-height: 14px;
      }
      .num {
        margin-bottom: 17px;
        font-size: 24px;
        font-family: STHeitiSC-Medium, STHeitiSC;
        font-weight: 500;
        color: #33302d;
        line-height: 25px;
      }
      .desc {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #696969;
        line-height: 14px;
        .desc_name {
          color: #696969;
        }
      }
      .red {
        color: #fe292b;
      }
      .green {
        color: #60b900;
      }
    }
  }
</style>
